<template>
  <div>
    <div id="annular"></div>
  </div>
</template>

<script>
  import { picData } from '@api/api'

  export default {
    name: 'annular',
    data () {
      return {
        id:["STAT-003","STAT-004"],
        picD:[],
        option: {
          // color:['#70a1ff','#2ed573'],//配置颜色
          tooltip: {
            trigger: 'item',
            formatter: '{b}: {c} ({d}%)',
            position: ['0', '30%']
          },
          legend: {
            orient: 'horizontal',
            bottom: '-2%',
            data: ['国产', '进口'],
            textStyle: {
              fontSize: 12,
              color: '#fff'
            }
          },
          series: [
            {
              name: '汽车保有量占比',
              type: 'pie',
              radius: ['20%', '40%'],
              avoidLabelOverlap: false,
              top: '-40%',
              itemStyle: {
                normal: {
                  // borderWidth: 5,
                  // shadowBlur: 10,
                  // shadowColor: '#ffffff',
                  label: {
                    show: false
                  },
                  labelLine: {
                    show: false
                  }
                }
              },
              labelLine: {
                show: false
              },
              data: [
                {
                  name: '国产',
                  value: 0,
                  itemStyle: {
                    normal: {
                      color: { // 颜色渐变
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [{
                          offset: 0,
                          color: '#fca55f' // 0% 处的颜色
                        }, {
                          offset: 1,
                          color: '#d57121' // 100% 处的颜色1
                        }]
                      },
                    }
                  }
                },
                {
                  name: '进口',
                  value: 0,
                  itemStyle: {
                    normal: {
                      color: { // 颜色渐变
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [{
                          offset: 0,
                          color: '#73e7e1' // 0% 处的颜色
                        }, {
                          offset: 1,
                          color: '#00998f' // 100% 处的颜色1
                        }]
                      },
                    }
                  }
                },
              ]
            }
          ]
        },
        // url: {
        //   domesticImport: '/cxm/cxmEtlTotalholdings/domesticImport'
        // }
      }
    },
    mounted(){
      this.getPicData()
    },
    methods: {
      drawLine(){
        let annular = this.$echarts.init(document.getElementById('annular'))
        annular.setOption(this.option);
        let sizeFun = function () {
          annular.resize()
        }
        window.addEventListener('resize', sizeFun )
      },
      getPicData(){
        var that = this;
        let params = {
          id : that.id.toString()
        }
        picData(params).then((res)=>{
          if(res.success){
            that.picD = res.result;
            for(var i=0;i<that.picD.length;i++){
              if(that.picD[i].name.toString().indexOf("进口")>0){
                that.option.series[0].data[1].value=that.picD[i].value
              }else{
                that.option.series[0].data[0].value=that.picD[i].value
              }
            }
            this.drawLine()
          }
        })
      }
    }
  }
</script>

<style scoped>
  #annular {
    width: 100%;
    /*height: 170px;*/
    height: 20vh;
  }
</style>